<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			
			.box{
				position: relative;
				overflow: hidden;
				width: 759px;
				height: 423px;
				margin: 50px auto;
				border: 4px solid #000;
			}
			.box .slider{
				position: absolute;
				font-size: 0;
				top: 0;
				left: 0;
			}
			.box .flower {
				position: absolute;
				bottom: 0;
				left: 0;
				background: rgba(0,0,0,0.4);
				width: 759px;
				height: 34px;
				padding: 4px 0 0 30px;
			}
			.box .flower li {
				float: left;
				width: 28px;
				height: 30px;
				color:#fff;
				border-radius: 50%;
				cursor: pointer;
				text-align: center;
				line-height: 30px;
				font-weight: bold;
				font-style: italic;
				padding-right: 3px;
			}
			.box .flower li.curr {
				background: #121212;
			}
		</style>
	</head>
	<body>
		<div class="box">
		<div class="slider">
			<ul>
				<li><img src="img114/a.png"/></li>
				<li><img src="img114/b.png"/></li>
				<li><img src="img114/c.png"/></li>
				<li><img src="img114/d.png"/></li>
				<li><img src="img114/e.png"/></li>
				<li><img src="img114/f.png"/></li>
				<li><img src="img114/g.png"/></li>
			</ul>
		</div>
			<div class="flower">
				<ol>
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<li>4</li>
					<li>5</li>
					<li>6</li>
					<li>7</li>
				</ol>
			</div>
		</div>
		<script src="jquery-1.11.2.min.js"></script>
		<!--<script src="MyPicSlider - 副本.js"></script>-->
		<script type="text/javascript">
			$(function(){
				var singleHeight = $('.box img').height();
				var currIndex = 0;
				var timer = null;
				var oldsliderheight = singleHeight * $('.box img').length;
				var lastindex = $('.box img').length - 1
				$('.box .slider ul').append($('.box .slider li:last').clone());
				$('.box .slider').height(singleHeight + oldsliderheight);
				function moveUp() {
					if (currIndex < $('.box img').length - 1) {
						currIndex++;
					} else {
						currIndex = 0;
					}
					var newTop = -1 * currIndex * singleHeight;
					$('.box .slider').stop().animate({top:newTop},800,function(){
						timer = setTimeout(function(){
							moveUp();
						},600);
					});
					$('.box .flower li').eq(currIndex).addClass('curr').siblings().removeClass('curr');
					timer = setTimeout(moveUp,3000);
				}
				
				$('.box').mouseenter(function(){
					//$('.box ul').stop();
					clearTimeout(timer);
				}).mouseleave(function(){
					moveUp();
				});
				
				$('.box .flower li').mouseenter(function(){
					var currIndex = $(this).index();
					var newTop = -1 * currIndex * singleHeight;
					$('.box .slider ul').stop().animate({
						top:newTop
					},800);
					$(this).addClass('curr').siblings().removeClass('curr');
				}).mouseleave(function(){
					
				});
			
				
				moveUp();
				//$('.box').MyPicSlider({speed:800, direction:'top',interval:600});
			});
		</script>
	</body>
</html>